
/* 外边距 */
.mauto-x{margin: 0 auto;}
// 定义内外边距，历遍1-500
@for $i from 0 through 500 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 得出：u-margin-30或者u-m-30
		.u-margin-#{$i}, .m#{$i}r {
			margin: $i + rpx;
		}
		
		// 得出：u-padding-30或者u-p-30
		.u-padding-#{$i}, .p#{$i}r {
			padding: $i + rpx;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： u-m-l-30
			// 定义外边距
			.m#{$short}#{$i}r {
				margin-#{$long}: $i + rpx;
			}
			
			// 定义内边距
			.p#{$short}#{$i}r {
				padding-#{$long}: $i + rpx;
			}
		}
	}
}

.p0 {padding:0;}
.pl0 {padding-left:0;}
.pr0 {padding-right:0;}
.pt0 {padding-top:0;}
.pb0 {padding-bottom:0;}
/* 宽 */
.w25{width: 25%;}
.w33{width: 33.333%;}
.w50{width: 50%;}
.w100{width: 100%;}

// 定义width
@for $i from 1 through 1000 {
	.w#{$i}r {
		width: $i+ rpx;
	}
}
/* 高 */
.h25{height: 25%;}
.h33{height: 33.333%;}
.h50{height: 50%;}
.h100{height: 100%;}
// 定义height
@for $i from 1 through 1000 {
	.h#{$i}r {
		height: $i+ rpx;
	}
}

/* 边框 */
.bor{border: 1px solid #F7F7F7;}
.bor-l{border-left: 1px solid #F7F7F7;}
.bor-r{border-right: 1px solid #F7F7F7;}
.bor-t{border-top: 1px solid #F7F7F7;}
.bor-b{border-bottom: 1px solid #F7F7F7;}

/* border-radius等分 */
.bor-rad50{border-radius: 50%;}
@for $i from 0 through 100 {
	.bor-rad#{$i}r {
		border-radius: $i+ rpx;
	}
}

.topPlace {
	width: 100%;
	height: var(--status-bar-height);
	background: transparent;
}
/* 文字对齐*/
.tl {
	text-align: left;
}

.tc {
	text-align: center;
}

.tr {
	text-align: right;
}
/*浮动与清除浮动*/
.fl {
	float: left;
}

.fr {
	float: right;
}

/*#ifdef H5*/
.fix {
	zoom: 1;
}

.fix:after {
	display: table;
	content: '';
	clear: both;
}
/*#endif*/

/*显示*/
.dn {
	display: none;
}

.di {
	display: inline;
}

.db {
	display: block;
}

.dib {
	display: inline-block;
}

.dt {
	display: table;
}
/*#ifdef H5*/
div.dib {
	display: inline;
	zoom: 1;
}
/*#endif*/

.vm {
	vertical-align: middle;
}

.vib {
	display: inline-block;
	vertical-align: middle;
}

/*定位*/
.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.pf {
	position: fixed;
}
/*单行文本溢出省略号*/
.one-t {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all linear 0.2s;
}
/*多行文本溢出省略号*/
.more-t {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: all linear 0.2s;
}

/* ==================
          flex布局(colorui里面也有相关基础样式)
 ==================== */
/* x水平排列*/
.x-f {
	display: flex;
	flex-direction: row;
	align-items: center;
}
/*x两端且水平居中*/
.x-bc {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.x-b {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
/*x平分且水平居中*/
.x-ac {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
/*x水平靠上对齐*/
.x-start {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
/*x水平靠下对齐*/
.x-end {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}
/*上下左右居中*/
.x-c {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
/*y竖直靠左*/
.y-start {
	display: flex;
	flex-direction: row;
	flex-direction: column;
	align-items: flex-start;
}
/*y竖直靠右*/
.y-end {
	display: flex;
	flex-direction: row;
	flex-direction: column;
	align-items: flex-end;
}
/*y竖直居中*/
.y-f {
	display: flex;
	flex-direction: row;
	flex-direction: column;
	align-items: center;
}
// y竖直两端
.y-b {
	display: flex;
	flex-direction: row;
	flex-direction: column;
	justify-content: space-between;
}
/*y竖直两端居中*/
.y-bc {
	display: flex;
	flex-direction: row;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

/*透明*/
.opa10{opacity: 1;}
.opa9{opacity: .9;}
.opa8{opacity: .8;}
.opa7{opacity: .7;}
.opa6{opacity: .6;}
.opa5{opacity: .5;}
.opa4{opacity: .4;}
.opa3{opacity: .3;}
.opa2{opacity: .2;}
.opa1{opacity: .1;}
.opa0{opacity: 0;}
/*字体*/
.f10r {font-size:10rpx;}
.f12r {font-size:12rpx;}
.f14r {font-size:14rpx;}
.f15r {font-size:15rpx;}
.f16r {font-size:16rpx;}
.f18r {font-size:18rpx;}
.f20r {font-size:20rpx;}
.f22r {font-size:22rpx;}
.f24r {font-size:24rpx;}
.f25r {font-size:25rpx;}
.f26r {font-size:26rpx;}
.f28r {font-size:28rpx;}
.f30r {font-size:30rpx;}
.f32r {font-size:32rpx;}
.f34r {font-size:34rpx;}
.f36r {font-size:36rpx;}
.f38r {font-size:38rpx;}
.f40r {font-size:40rpx;}
.f45r {font-size:45rpx;}
.f50r {font-size:50rpx;}
.f55r {font-size:55rpx;}
.f60r {font-size:60rpx;}
.f65r {font-size:65rpx;}
/*字体颜色*/
.color-000{color: #000000;}
.color-333{color: #333333;}
.color-666{color: #666666;}
.color-999{color: #999999;}
.color-aaa{color: #AAAAAA;}
.color-bbb{color: #BBBBBB;}
.color-ccc{color: #CCCCCC;}
.color-ddd{color: #DDDDDD;}
.color-eee{color: #EEEEEE;}
.color-fff{color: #FFFFFF;}
.color{color: $uni-color-zhuse;}
.color-zs{color: $uni-color-zhuse;}
.color-fs{color: $uni-color-fuse;}
/*字体粗细*/
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-w{font-weight: bold;}
/*字体间距*/
.l-h1{line-height: 1;}
.l-h15{line-height: 1.5;}
.l-h2{line-height: 2;}
.l-h25{line-height: 2.5;}

/*背景颜色*/

.bg-000{background-color: #000000;}
.bg-111{background-color: #111111;}
.bg-222{background-color: #222222;}
.bg-333{background-color: #333333;}
.bg-444{background-color: #444444;}
.bg-555{background-color: #555555;}
.bg-666{background-color: #666666;}
.bg-777{background-color: #777;}
.bg-888{background-color: #888;}
.bg-999{background-color: #999;}
.bg-aaa{background-color: #AAAAAA;}
.bg-bbb{background-color: #bbbbbb;}
.bg-ccc{background-color: #CCCCCC;}
.bg-ddd{background-color: #DDDDDD;}
.bg-eee{background-color: #EEEEEE;}
.bg-fff{background-color: #FFFFFF;}
.bg-f7f{background-color: #F7F7F7;}
.bg-zs{background-color: $uni-color-zhuse;}
.bg-fs{background-color: $uni-color-fuse;}
.bg{background:$uni-color-zhuse}

/* 外边距 */
.mauto-x{margin: 0 auto;}
.m2r {margin:2rpx;}
.m5r {margin:5rpx;}
.m8r {margin:8rpx;}
.m10r {margin:10rpx;}
.m15r {margin:15rpx;}
.m20r {margin:20rpx;}
.m25r {margin:25rpx;}
.m30r {margin:30rpx;}
.m35r {margin:35rpx;}
.m40r {margin:40rpx;}
.m45r {margin:45rpx;}
.m50r {margin:50rpx;}
.m55r {margin:55rpx;}
.m60r {margin:60rpx;}
.m65r {margin:65rpx;}
.m70r {margin:70rpx;}
.m80r {margin:80rpx;}
.m90r {margin:90rpx;}
.m100r {margin:100rpx;}
.m110r {margin:110rpx;}
.m120r {margin:120rpx;}
/* 左*/
.ml2r {margin-left:2rpx;}
.ml5r {margin-left:5rpx;}
.ml8r {margin-left:8rpx;}
.ml10r {margin-left:10rpx;}
.ml15r {margin-left:15rpx;}
.ml20r {margin-left:20rpx;}
.ml25r {margin-left:25rpx;}
.ml30r {margin-left:30rpx;}
.ml35r {margin-left:35rpx;}
.ml40r {margin-left:40rpx;}
.ml45r {margin-left:45rpx;}
.ml50r {margin-left:50rpx;}
.ml55r {margin-left:55rpx;}
.ml60r {margin-left:60rpx;}
.ml65r {margin-left:65rpx;}
.ml70r {margin-left:70rpx;}
/* 右 */
.mr2r {margin-right:2rpx;}
.mr5r {margin-right:5rpx;}
.mr8r {margin-right:8rpx;}
.mr10r {margin-right:10rpx;}
.mr15r {margin-right:15rpx;}
.mr20r {margin-right:20rpx;}
.mr25r {margin-right:25rpx;}
.mr30r {margin-right:30rpx;}
.mr35r {margin-right:35rpx;}
.mr40r {margin-right:40rpx;}
.mr45r {margin-right:45rpx;}
.mr50r {margin-right:50rpx;}
.mr55r {margin-right:55rpx;}
.mr60r {margin-right:60rpx;}
.mr65r {margin-right:65rpx;}
.mr70r {margin-right:70rpx;}
/* 上 */
.mt2r {margin-top:2rpx;}
.mt5r {margin-top:5rpx;}
.mt8r {margin-top:8rpx;}
.mt10r {margin-top:10rpx;}
.mt15r {margin-top:15rpx;}
.mt20r {margin-top:20rpx;}
.mt25r {margin-top:25rpx;}
.mt30r {margin-top:30rpx;}
.mt35r {margin-top:35rpx;}
.mt40r {margin-top:40rpx;}
.mt45r {margin-top:45rpx;}
.mt50r {margin-top:50rpx;}
.mt55r {margin-top:55rpx;}
.mt60r {margin-top:60rpx;}
.mt65r {margin-top:65rpx;}
.mt70r {margin-top:70rpx;}
.mt80r {margin-top:80rpx;}
.mt90r {margin-top:90rpx;}
.mt100r {margin-top:100rpx;}
.mt110r {margin-top:110rpx;}
.mt120r {margin-top:120rpx;}
.mt130r {margin-top:130rpx;}
.mt140r {margin-top:140rpx;}
.mt150r {margin-top:150rpx;}
.mt160r {margin-top:160rpx;}
/* 下 */
.mb2r {margin-bottom:2rpx;}
.mb5r {margin-bottom:5rpx;}
.mb8r {margin-bottom:8rpx;}
.mb10r {margin-bottom:10rpx;}
.mb15r {margin-bottom:15rpx;}
.mb20r {margin-bottom:20rpx;}
.mb25r {margin-bottom:25rpx;}
.mb30r {margin-bottom:30rpx;}
.mb35r {margin-bottom:35rpx;}
.mb40r {margin-bottom:40rpx;}
.mb45r {margin-bottom:45rpx;}
.mb50r {margin-bottom:50rpx;}
.mb55r {margin-bottom:55rpx;}
.mb60r {margin-bottom:60rpx;}
.mb65r {margin-bottom:65rpx;}
.mb70r {margin-bottom:70rpx;}
.mb80r {margin-bottom:80rpx;}
.mb90r {margin-bottom:90rpx;}
.mb100r {margin-bottom:100rpx;}
.mb110r {margin-bottom:110rpx;}
.mb120r {margin-bottom:120rpx;}
.mb130r {margin-bottom:130rpx;}
.mb140r {margin-bottom:140rpx;}
.mb150r {margin-bottom:150rpx;}
.mb160r {margin-bottom:160rpx;}


.m0 {margin:0rpx;}
.ml0 {margin-left:0rpx;}
.mr0 {margin-right:0rpx;}
.mt0 {margin-top:0rpx;}
.mb0 {margin-bottom:0rpx;}

/* 内边距-------------------- */


.p2r {padding:2rpx;}
.p5r {padding:5rpx;}
.p8r {padding:8rpx;}
.p10r {padding:10rpx;}
.p15r {padding:15rpx;}
.p20r {padding:20rpx;}
.p25r {padding:25rpx;}
.p30r {padding:30rpx;}
.p35r {padding:35rpx;}
.p40r {padding:40rpx;}
.p45r {padding:45rpx;}
.p50r {padding:50rpx;}
.p55r {padding:55rpx;}
.p60r {padding:60rpx;}
.p65r {padding:65rpx;}
.p70r {padding:70rpx;}
.p75r {padding:75rpx;}
.p80r {padding:80rpx;}
.p90r {padding:90rpx;}
.p100r {padding:100rpx;}

/* 左*/
.pl2r {padding-left:2rpx;}
.pl5r {padding-left:5rpx;}
.pl8r {padding-left:8rpx;}
.pl10r {padding-left:10rpx;}
.pl15r {padding-left:15rpx;}
.pl20r {padding-left:20rpx;}
.pl25r {padding-left:25rpx;}
.pl30r {padding-left:30rpx;}
.pl35r {padding-left:35rpx;}
.pl40r {padding-left:40rpx;}
.pl45r {padding-left:45rpx;}
.pl50r {padding-left:50rpx;}
.pl55r {padding-left:55rpx;}
.pl60r {padding-left:60rpx;}
.pl65r {padding-left:65rpx;}
.pl70r {padding-left:70rpx;}
.pl75r {padding-left:75rpx;}
.pl80r {padding-left:80rpx;}
.pl90r {padding-left:90rpx;}
.pl100r {padding-left:100rpx;}



/* 右 */
.pr2r {padding-right:2rpx;}
.pr5r {padding-right:5rpx;}
.pr8r {padding-right:8rpx;}
.pr10r {padding-right:10rpx;}
.pr15r {padding-right:15rpx;}
.pr20r {padding-right:20rpx;}
.pr25r {padding-right:25rpx;}
.pr30r {padding-right:30rpx;}
.pr35r {padding-right:35rpx;}
.pr40r {padding-right:40rpx;}
.pr45r {padding-right:45rpx;}
.pr50r {padding-right:50rpx;}
.pr55r {padding-right:55rpx;}
.pr60r {padding-right:60rpx;}
.pr65r {padding-right:65rpx;}
.pr70r {padding-right:70rpx;}
.pr75r {padding-right:75rpx;}
.pr80r {padding-right:80rpx;}
.pr90r {padding-right:90rpx;}
.pr100r {padding-right:100rpx;}
/* 上 */
.pt2r {padding-top:2rpx;}
.pt5r {padding-top:5rpx;}
.pt8r {padding-top:8rpx;}
.pt10r {padding-top:10rpx;}
.pt15r {padding-top:15rpx;}
.pt20r {padding-top:20rpx;}
.pt25r {padding-top:25rpx;}
.pt30r {padding-top:30rpx;}
.pt35r {padding-top:35rpx;}
.pt40r {padding-top:40rpx;}
.pt45r {padding-top:45rpx;}
.pt50r {padding-top:50rpx;}
.pt55r {padding-top:55rpx;}
.pt60r {padding-top:60rpx;}
.pt65r {padding-top:65rpx;}
.pt70r {padding-top:70rpx;}
.pt75r {padding-top:75rpx;}
.pt80r {padding-top:80rpx;}
.pt90r {padding-top:90rpx;}
.pt100r {padding-top:100rpx;}
/* 下 */
.pb2r {padding-bottom:2rpx;}
.pb5r {padding-bottom:5rpx;}
.pb8r {padding-bottom:8rpx;}
.pb10r {padding-bottom:10rpx;}
.pb15r {padding-bottom:15rpx;}
.pb20r {padding-bottom:20rpx;}
.pb25r {padding-bottom:25rpx;}
.pb30r {padding-bottom:30rpx;}
.pb35r {padding-bottom:35rpx;}
.pb40r {padding-bottom:40rpx;}
.pb45r {padding-bottom:45rpx;}
.pb50r {padding-bottom:50rpx;}
.pb55r {padding-bottom:55rpx;}
.pb60r {padding-bottom:60rpx;}
.pb65r {padding-bottom:65rpx;}
.pb70r {padding-bottom:70rpx;}
.pb75r {padding-bottom:75rpx;}
.pb80r {padding-bottom:80rpx;}
.pb90r {padding-bottom:90rpx;}
.pb100r {padding-bottom:100rpx;}

.p0 {padding:0;}
.pl0 {padding-left:0;}
.pr0 {padding-right:0;}
.pt0 {padding-top:0;}
.pb0 {padding-bottom:0;}
/* 宽 */
.w25{width: 25%;}
.w33{width: 33.333%;}
.w50{width: 50%;}
.w100{width: 100%;}
.w10r{width: 10rpx;}
.w20r{width: 20rpx;}
.w30r{width: 30rpx;}
.w40r{width: 40rpx;}
.w50r{width: 50rpx;}
.w60r{width: 60rpx;}
.w70r{width: 70rpx;}
.w80r{width: 80rpx;}
.w90r{width: 90rpx;}
.w100r{width: 100rpx;}
.w110r{width: 110rpx;}
.w120r{width: 120rpx;}
.w130r{width: 130rpx;}
.w140r{width: 140rpx;}
.w150r{width: 150rpx;}
.w160r{width: 160rpx;}
.w170r{width: 170rpx;}
.w180r{width: 180rpx;}
.w190r{width: 190rpx;}
.w200r{width: 200rpx;}
.w220r{width: 220rpx;}
.w240r{width: 240rpx;}
.w250r{width: 250rpx;}
.w260r{width: 260rpx;}
.w280r{width: 280rpx;}
.w300r{width: 300rpx;}

/* 高 */
.h10{height: 10%;}
.h20{height: 20%;}
.h30{height: 30%;}
.h25{height: 25%;}
.h33{height: 33.333%;}
.h40{height: 40%;}
.h50{height: 50%;}
.h60{height: 60%;}
.h70{height: 70%;}
.h80{height: 80%;}
.h90{height: 90%;}
.h100{height: 100%;}
.h1r{height: 1px;}
.h10r{height: 10rpx;}
.h20r{height: 20rpx;}
.h30r{height: 30rpx;}
.h40r{height: 40rpx;}
.h50r{height: 50rpx;}
.h60r{height: 60rpx;}
.h70r{height: 70rpx;}
.h80r{height: 80rpx;}
.h90r{height: 90rpx;}
.h100r{height: 100rpx;}
.h110r{height: 110rpx;}
.h120r{height: 120rpx;}
.h130r{height: 130rpx;}
.h140r{height: 140rpx;}
.h150r{height: 150rpx;}
.h160r{height: 160rpx;}
.h170r{height: 170rpx;}
.h180r{height: 180rpx;}
.h190r{height: 190rpx;}
.h200r{height: 200rpx;}
.h220r{height: 220rpx;}
.h240r{height: 240rpx;}
.h250r{height: 250rpx;}
.h260r{height: 260rpx;}
.h280r{height: 280rpx;}
.h300r{height: 300rpx;}

/* 边框 */
.bor{border: 1px solid #F7F7F7;}
.bor-l{border-left: 1px solid #F7F7F7;}
.bor-r{border-right: 1px solid #F7F7F7;}
.bor-t{border-top: 1px solid #F7F7F7;}
.bor-b{border-bottom: 1px solid #F7F7F7;}

.bor-rad50{border-radius: 50%;}
.bor-rad5r{border-radius: 5rpx;}
.bor-rad10r{border-radius: 10rpx;}
.bor-rad15r{border-radius: 15rpx;}
.bor-rad20r{border-radius: 20rpx;}
.bor-rad25r{border-radius: 25rpx;}
.bor-rad30r{border-radius: 30rpx;}
.bor-rad35r{border-radius: 35rpx;}
.bor-rad40r{border-radius: 40rpx;}
.bor-rad45r{border-radius: 45rpx;}
.bor-rad50r{border-radius: 50rpx;}
.bor-rad-t0{border-top-left-radius: 0 ;border-top-right-radius: 0;}
.bor-rad-b0{border-bottom-left-radius: 0 ;border-bottom-right-radius: 0;}
.bor-rad-l0{border-top-left-radius: 0 ;border-bottom-left-radius: 0;}
.bor-rad-r0{border-top-right-radius: 0;border-bottom-right-radius: 0;}

/* flex */
.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.als-s{align-self: stretch;}

/* flex */
/*定位*/
.pr{position: relative;}
.pa{position: absolute;}
.pf{position: fixed}
// .top0{top}